<template>
  <van-row class="myAttention_item" type="flex" justify="space-between">

    <van-col span="6">
      <div>
        <van-image
          round
          cover
          width="1.8rem"
          height="1.8rem"
          :src="logoImg"
        />
        <div style="margin-top: 16px; font-weight: bold">{{'需求改了，评分、评价组件暂时不做！！！'}}</div>
      </div>
    </van-col>


    <van-col span="18" v-if="rateRspObj.rateArr.length">

      <div v-for="(item, index) in rateRspObj.rateArr" :key="index">

        <van-divider
          :style="{
          color: '#1989fa', borderColor: '#1989fa', padding: '0 30px',
          margin: index === 0 ? '-8px 0 8px 0': '12px 0 8px 0'
         }"
        >
          {{item.title}}
        </van-divider>

        <div style="text-align: left" class="rate_item">
          <span>评分：</span>
          <!-- 实现动态的model遍历显示  -->
          <van-slider
            v-model="item.score"
            active-color="#FFD21E"
            :min="-5"
            :max="5"
            disabled
          >
            <template #button>
              <div class="custom-button">{{item.score}}</div>
            </template>
          </van-slider>
        </div>
        <div style="margin-top: 16px; text-align: left" class="rate_item">
          <span>评价说明：</span>
          <span>{{ '关于矛盾的特殊性的问题应当着重地加以研究，并用足够的篇幅加以说明。'}}</span>
        </div>

      </div>

      <div style="margin-top: 16px; text-align: left" class="rate_item">
        <span>评价时间：</span>
        <span>{{rateRspObj.time}}</span>
      </div>


    </van-col>
  </van-row>
</template>

<script>
  import logoImg from '@/assets/logo.png';
  export default {
    name: 'comRateItem',
    props: {
      rightValue: String,
      rateRspObj: Object,
    },
    data(){
      return {
        logoImg,
      }
    },
  }
</script>

<style lang="scss" scoped>
  .myAttention_item{
    background-color: #FFFFFF;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    line-height: 1.1em;
    padding: 12px 8px;
    font-size: 13px;
    .rate_item{
      padding-right: 10px;
      display: flex;
      /deep/ .van-slider--disabled{
        opacity: 1.1;
      }
      span {
        &:first-of-type{
          width: 5.5em;
          font-size: 13px;
          /* 某一项不缩放  */
          flex-shrink: 0;
        }
        &:last-of-type{
          letter-spacing: 0.3px;
        }
      }
      .custom-button {
        width: 26px;
        color: #fff;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        /*font-weight: bold;*/
        background-color: #FFD21E;
        border-radius: 100px;
      }
    }
  }
</style>
